@extends('layouts.default')

@section('title', '')

@push('scripts')
<script>
    layui.use(['layer', 'element','form','table','laypage','laytpl','laydate','tree','transfer'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var tree = layui.tree;
        var transfer = layui.transfer;
        var param = {}; 
        var id = "{{request()->get('id',0)}}";
        var title = "{{request()->get('title','')}}";
    
        $('#tab-df').hide();
        getList(1);

        if(id != 0){
            getDfMembers({'pid':id},function(res){
                //渲染穿梭框    
                transfer.reload('transferId', {
                    data: res.data.data,
                    value: res.data.data_true
                });
            })
        }

        //日期时间范围
        laydate.render({
            elem: '#test10'
            ,type: 'date'
            ,range: true
        });
      

        // 查询
        form.on('submit(queryBtn)', function(data) {
            Object.assign(param, {
                    "search": data.field
            });
            getList(1);
            return false; 
        });

        //重置
        $('button[type=reset]').click(function(){
            $('#search-form')[0].reset();
            $('button[lay-filter=queryBtn]').click(); 
            return false;    
        })

        function getList(page){
            Object.assign(param,{"page":page});		        	
            Object.assign(param,{"id":id});		        	
            getDgTwoList(param,function(res){		
                if(res.code == 1){
                    table.render({
                        elem: '#tablelist'
                        ,toolbar: '#toolbarDemo'
                        ,defaultToolbar:[]
                        ,data: res.data.data
                        ,limit:res.data.limit
                        //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,cols: [[ //表头
                            {type: 'checkbox', fixed: 'left',width:'5%'}
                        ,{field: 'id', title: '子组名称/成员',width:'20%',align:'center',templet: function(d) {
                            // return (page-1)*res.data.limit+d.LAY_INDEX;
                            return d.title;
                        }}
                        ,{field: 'counts', title: '小组人数',width:'15%',align:'center'}								
                        ,{field: 'user_type_text', title: '创建人',width:'15%',align:'center',templet: function(d) {                         
                            return d.user.user_name;
                        }}																														
                        ,{field: 'created_at', title: '创建时间',width:'15%',align:'center'}																															
                        ,{field: '', title: '操作',toolbar: '#barDemo',width:'',align:'center'}
                        ]]
                    });

                    $('#pageBar').empty();                     
                    if(res.data.total >0){
                        //分页
                        laypage.render({
                        elem: 'pageBar' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: [res.data.total] //数据总数，从服务端得到
                        ,curr: page
                        ,layout: ['limit', 'count', 'prev', 'page', 'next',  'skip']                               
                        ,limit:res.data.limit
                        ,jump: function(obj, first) {
                                //首次不执行
                                if (!first) {
                                    Object.assign(param,{"limit":obj.limit});                                
                                    getList(obj.curr)
                                }
                            }
                        });
                    } 
                     setBtnPermission();                           
                }else {
                    layer.msg(res.msg, {icon: 5});
                } 
                                    
            })
        }

        //选择人员
        $(document).on('click','#tianjiary',function(){  
            console.log(222);  
            layer.open({
                type: 1
                ,title:'选择成员'
                ,content: $('#view-teacher') 
                ,area: ['900px', '650px']
                ,success: function(layero, index){
                    //渲染机构
                    getGroupAllBySchool({},function(res){
                        if(res.code == 1){
                            //实例树结构
                            tree.render({
                                elem: '#tree1' //默认是点击节点可进行收缩
                                ,data: res.data
                                ,showCheckbox:true
                                ,id: 'treeId'
                                ,oncheck: function(obj){
                                    // console.log(obj.data); //得到当前点击的节点数据
                                    // console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                                    // console.log(obj.elem); //得到当前节点元素
                                    var checkData = tree.getChecked('treeId');
                                    getTeacherByGroupId({'group':checkData},function(res){
                                        if(res.code == 1){ 
                                            transfer.reload('transferId', {
                                                data: res.data
                                            });                                         
                                        }
                                    })
                                }
                            });
                            
                        }                             
                    })
                }
                ,btn: ['确定', '取消']
                ,btnAlign: 'c'
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    var getData = transfer.getData('transferId');  
                    if(getData.length>0){
                        addDfMembers({'pid':id,'member':getData},function(res){
                            if(res.code == 1){
                                layer.msg(res.msg,{icon: 6,time: 1000},function(){
                                    getList(1);
                                    $('#view-teacher').hide();
                                    layer.closeAll();
                                });
                            }else{
                                layer.msg(res.msg, {icon: 5,shift : 6});
                            }
                        })
                    }else{
                        layer.msg('请选择成员', {icon: 5,shift : 6}); return  false;
                    }
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    $('#view-teacher').hide();
                    //return false 开启该代码可禁止点击该按钮关闭
                }               
                ,cancel: function(){ 
                    //右上角关闭回调
                    $('#view-teacher').hide();
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        })

        //实例穿梭框
        transfer.render({
            elem: '#chuansuo'
            ,data: []
            ,title:['用户列表','已选用户']
            ,id: 'transferId'
            ,showSearch: true
            ,onchange:function(data, index){
                //console.log(data); //得到当前被穿梭的数据
                //console.log(index); //如果数据来自左边，index 为 0，否则为 1
            }
        })

        table.on('tool(tablelist)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
     
            if(layEvent === 'del'){ //删除
                layer.confirm('确定删除吗?', function(index){
                    delDf({'id':data.id},function(res){
                        if(res.code == '1'){
                            layer.msg(res.msg,{icon: 6,time: 1000});
                            obj.del(); 
                            layer.close(index);
                        }else{
                            layer.msg(res.msg, {icon: 5,shift : 6});
                        }
                    })
                
                
                });
            }else if(layEvent === 'edit'){  
                console.log(data);
                form.val("formDemo2", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值                     
                    'title': data.title,        
                    'id':data.id
                });   
                add_group('编辑自定义分组');
            }else if(layEvent === 'edit2'){  
                $(window.parent.document).find('iframe[id=48]').attr('src',"{{route('systems.defined.threeindex')}}?id="+data.id+"&title="+data.title+"&parent_id="+id+"&parent_title="+title);
            }
        });


        function add_group(title){
            layer.open({
                type: 1
                ,title:title
                ,content: $('#add-one-group') 
                ,area: ['450px', '300px']
                ,btn: ['确定', '取消']
                ,btnAlign: 'c'
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    var isValid = form.validate('.verify-title');
                    if(!isValid){
                        return false;
                    }
                    var data = form.val("formDemo2");
                    data.pid = id;
                    addDf(data,function(res){
                        if(res.code == 1){
                            layer.msg(res.msg,{icon: 6,time: 1000},function(){
                                $('#add-one-group').hide();
                                layer.closeAll();
                                parent.layui.admin.refreshThis();                              
                            });
                        }else{
                            layer.msg(res.msg, {icon: 5,shift : 6});
                        }
                    })
                    
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    $('#add-one-group').hide();
                    //return false 开启该代码可禁止点击该按钮关闭
                }               
                ,cancel: function(){ 
                    //右上角关闭回调
                    $('#add-one-group').hide();
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }

        $(document).on('click','#chuangjian',function(){
            add_group('添加自定义分组');
        })

        
        //返回上一级
        $('#fanhui').click(function(){
            $(window.parent.document).find('iframe[id=48]').attr('src',"{{route('systems.defined.index')}}");
        })

    })
</script>

<script type="text/html" id="barDemo">
    <a _href="" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit"  btnPermission="50">编辑</a>
    @{{# if(d.is_node == 1){ }}
    <a _href="" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit2"  btnPermission="52">维护</a>
    @{{# } }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" btnPermission="51">删除</a>
</script>

    <!---头部工具栏--->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button id="chuangjian"  class="layui-btn pear-btn-primary layui-btn-sm" btnPermission="49">创建</button>
        <button id="tianjiary"  class="layui-btn pear-btn-primary layui-btn-sm" btnPermission="53">添加人员</button>
    </div>
</script>
@endpush

@section('content')
    <style>
         /* .layui-table-body{
            overflow: hidden;
        }  */
    </style>

    <div id="zdh" ><a id="fanhui" >自定义组</a> </span> / 维护({{$_GET['title']}})</span></div>

    <div class="layui-card" style="margin-top:50px;">
       
        <div class="layui-card-body" id="courseRows">
            <table class="layui-table" id="tablelist" lay-filter="tablelist" ></table>
            <div class="pagebarbox" style="text-align: end"><div id="pageBar" class="pagebar"></div></div>
        </div>
    </div>

    <!--创建-->
    <div id="add-one-group" style="display:none;" >
        <form class="layui-form" action="" style="margin-right: 30px;margin-top: 30px;" lay-filter="formDemo2">
            <div class="layui-form-item">
                <label class="layui-form-label">子组名称</label>
                <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入小组名称" autocomplete="off" class="layui-input verify-title">
                </div>
            </div>
            <input type="hidden" name="id" value="" >
        </form>
    </div>

    <!---选择老师--->
    @include('common.teacherTransfer')
   
@endsection
